<template>
  <div
      v-loading="loading"
      class="app-container"
      :element-loading-text="loadingText"
  >
    <!-- 挂号编号的查询条件开始 -->
    <el-form ref="queryForm" label-width="88px">
      <el-form-item label="挂号单ID" prop="regId">
        <el-input
            v-model="regId"
            clearable
            placeholder="请输入挂号单号"
            size="small"
            style="width:300px;margin-right: 12px"
        />
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">读取IC卡</el-button>
      </el-form-item>
    </el-form>
    <!-- 挂号编号的查询条件结束 -->
    <!-- 挂号输入框下面的所有内容开始 -->
    <div v-if="careHistory.regId!==undefined">
      <!-- 病例信息开始 -->
      <el-card style="margin-bottom: 5px">
        <el-form label-position="right" label-width="120px" inline class="demo-table-expand">
          <el-form-item label="挂号id:">
            <span v-text="careHistory.regId" />
          </el-form-item>
          <el-form-item label="医生姓名:">
            <span v-text="careHistory.userName" />
          </el-form-item>
          <el-form-item label="科室名称:">
            <span v-text="careHistory.deptName" />
          </el-form-item>
          <el-form-item label=" 患者姓名:">
            <span v-text="careHistory.patientName" />
          </el-form-item>
          <el-form-item label="就诊时间:">
            <span v-text="careHistory.careTime" />
          </el-form-item>
          <el-form-item label="主诉症状:">
            <span v-text="careHistory.caseTitle" />
          </el-form-item>
          <el-form-item label="诊断信息:">
            <span v-text="careHistory.caseResult" />
          </el-form-item>
          <el-form-item label="医生建议:">
            <span v-text="careHistory.doctorTips" />
          </el-form-item>
        </el-form>
      </el-card>
      <!-- 病例信息结束 -->
      <!-- 工具按钮开始 -->
      <el-card style="margin-bottom: 5px">
        <el-button type="success" icon="el-icon-finished" @click="handleSelectAll">全选</el-button>
        <el-button type="success" icon="el-icon-finished" @click="handleUnSelectAll">取消全选</el-button>
        <el-button type="danger" icon="el-icon-bank-card" @click="handleBackfeeWithCash">现金退费</el-button>
        <el-button type="danger" icon="el-icon-bank-card" @click="handleBackfeeWithWx">微信退费</el-button>
        <span style="margin-left:20px">订单总额:<span style="color:red;margin-left:20px">￥:{{ allAmount }}</span></span>
      </el-card>
      <!-- 工具结束开始 -->
      <!-- 未支付的处方信息开始 -->
      <el-card style="margin-bottom: 5px">
        <el-collapse v-if="careOrders.length>0" v-model="activeNames">
          <el-collapse-item v-for="(b,index) in careOrders" :key="index" :name="index">
            <template slot="title">
              【{{ b[0].itemType ==='0'?'药用处方':'检查处方' }}】【{{ index+1 }}】【处方总额】:￥{{ b[0].itemType==='0'? allAmounts:allAmounts2 }}
            </template>
            <el-table
                ref="refTable"
                v-loading="loading"
                border
                :data="b"
                :row-class-name="tableRowClassName"
                @selection-change="handleCareOrderItemSelectionChange($event,index)"
            >
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="序号" align="center" type="index" width="50" />
              <el-table-column :label="b.itemType==='0'?'药品名称':'项目名称'" align="center" prop="itemName" />
              <el-table-column label="数量" align="center" prop="num" />
              <el-table-column label="单价(元)" align="center" prop="price" />
              <el-table-column label="金额(元)" align="center" prop="amount" />
              <el-table-column label="备注" align="center" prop="remark" />
              <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat"/>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-card>
      <!-- 未支付的处方信息结束 -->
      <!-- 挂号输入框下面的所有内容结束 -->
    </div>
    <div v-else style="text-align:center">请输入正确的挂号单ID查询</div>

    <!--    支付 弹框-->
    <el-dialog title="收银台"
               :visible.sync="dialogVisible"
               width="30%">
      <div style="text-align:center;">
        <p>订单号：{{pay.orderNo}}</p>
        <div style="border: 1px solid #f3f3f3;width: 220px;height: 220px;padding: 10px; margin: 0 auto">
          <vue-qr
              :text="pay.code_url"
              :margin="0"
              :logo-src="require('@/assets/tx.jpg')"
              color-light="#FFF"
              :size="200">
          </vue-qr>
        </div>
      </div>
      <el-divider/>
      <div style="font-size: 13px">
        <i>提示！！！</i><br>
        支付成功前请勿手动关闭页面<br>
        二维码两个小时内有效，请及时扫码支付<br>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
  components: {
    VueQr
  },
  data() {
    return {
      // 支付 弹窗
      dialogVisible:false,
      pay:{},
      // ===================
      // 整体遮罩
      loading: false,
      // 设置遮罩层的文字
      loadingText: '',
      // 用户输入的挂号单号
      regId: undefined,
      // 挂号对象
      registration: {},
      // 病例对象
      careHistory: {},
      // 处方信息
      careOrders: [],
      careOrders1: [],
      // 处方详情的状态字典
      statusOptions: [],
      // 当前选中的订单总额
      allAmount: 0.00,
      allAmounts: 0.00,
      allAmounts2: 0.00,
      // 当前选中的所有项目集合
      itemObjs: [],
      itemObjs1: [],
      // 展开的折叠面板的名字
      activeNames: [],

      dirItem:[],
    }
  },
  created() {
    // this.getDir()
  },
  methods: {


    statusFormat(row){
      let msg = '未知'
      if (row.status === row.dictValue){
        msg = row.dictLabel
      }
      return msg
    },


    // 全选择
    handleSelectAll() { // 先取消再反选择
      const tables = this.$refs.refTable
      tables.filter(t => {
        t.clearSelection()
        t.toggleAllSelection() // 注意不要用错方法了
      })
    },
    // 取消全选
    handleUnSelectAll() {
      const tables = this.$refs.refTable
      tables.filter(t => {
        t.clearSelection()
      })
    },
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },

    handleCareOrderItemSelectionChange(sel,index){
      if (index === 0) {
        this.itemObjs = sel
      }else if (index === 1) {
        this.itemObjs1 = sel
      }
      // 调用计算选中的总额
      this.computeAllAmount()
    },
    // //计算选中的总额
    computeAllAmount() {
      this.allAmount = 0
      this.itemObjs.filter(item => {
        this.allAmount += item.amount
      })
      this.itemObjs1.filter(item => {
        this.allAmount += item.amount
      })
    },

    // 现金
    handleBackfeeWithCash() {
      if (!this.careHistory.regId) {
        this.$message.warning('请输入挂号单ID查询')
        return
      } else if (this.itemObjs.length === 0 && this.itemObjs1.length === 0) {
        this.$message.warning('请选择要退费的项目')
        return
      } else {
        // 组装数据
        let dtoVo = {
          dtoPayVo: {
            orderAmount: this.allAmount,
            chId: this.careHistory.chId,
            regId: this.careHistory.regId,
            patientName: this.careHistory.patientName
          },
          dtoListVo: []
        }
        this.itemObjs.filter(item => {
          const obj = {
            itemId: item.itemId,
            coId: item.coId,
            itemName: item.itemName,
            itemPrice: item.price,
            itemNum: item.num,
            itemType: item.itemType,
            itemAmount: item.amount
          }
          dtoVo.dtoListVo.push(obj)
        })
        this.itemObjs1.filter(item => {
          const obj = {
            itemId: item.itemId,
            coId: item.coId,
            itemName: item.itemName,
            itemPrice: item.price,
            itemNum: item.num,
            itemType: item.itemType,
            itemAmount: item.amount
          }
          dtoVo.dtoListVo.push(obj)
        })
        this.$http.post("/orderBackfee/cashRefunds", dtoVo).then(res => {
          if (res.data.code === 200) {
            this.$message.success('现金退款成功')
          } else {
            this.$message.error(res.data.msg)
          }
          this.handleQuery()
        })
        // 清空之前选中的
        this.handleUnSelectAll()
      }
    },

    // 微信
    handleBackfeeWithWx() {
      if (!this.careHistory.regId) {
        this.$message.warning('请输入挂号单ID查询')
        return
      } else if (this.itemObjs.length === 0 && this.itemObjs1.length === 0) {
        this.$message.warning('请选择要退费的项目')
        return
      } else {
        // 组装数据
        const dtoVo = {
          dtoPayVo: {
            orderAmount: this.allAmount,
            chId: this.careHistory.chId,
            regId: this.careHistory.regId,
            patientName: this.careHistory.patientName
          },
          dtoListVo: []
        }
        this.itemObjs.filter(item => {
          const obj = {
            itemId: item.itemId,
            coId: item.coId,
            itemName: item.itemName,
            itemPrice: item.price,
            itemNum: item.num,
            itemType: item.itemType,
            itemAmount: item.amount
          }
          dtoVo.dtoListVo.push(obj)
        })
        this.itemObjs1.filter(item => {
          const obj = {
            itemId: item.itemId,
            coId: item.coId,
            itemName: item.itemName,
            itemPrice: item.price,
            itemNum: item.num,
            itemType: item.itemType,
            itemAmount: item.amount
          }
          dtoVo.dtoListVo.push(obj)
        })

        this.$http.post("/orderBackfee/backWxPayMsg", dtoVo).then(res => {
          if (res.data.code === 200) {
            this.$message.success('微信退款成功')
          }else {
            this.$message.error(res.data.msg)
          }
          this.handleQuery()
          // console.log(res.data.data)
        })
        // 清空之前选中的
        this.handleUnSelectAll()
      }
    },
    resetCurrentParams() {
      this.careHistory = {}
      this.careOrders = []
    },

    //   根据挂号单号查询挂号信息
    handleQuery() {
      if (this.regId === '' || this.regId === null || this.regId === undefined) {
        this.$message.warning( '请输入挂号单号')
        this.resetCurrentParams()
        return
      }
      this.careHistory = {}
      this.careOrders = []
      // 清空之前选中的
      this.itemObjs = []
      this.loading = true
      this.loadingText = '数据查询中，请稍后...'
      this.allAmount= 0.00
      this.allAmounts= 0.00
      this.allAmounts2= 0.00
      if (this.regId !== undefined || this.regId !== '' || this.regId !== null) {
        this.$http.get('/careHistory/queryByRegId/'+this.regId +'/1').then(res => {
          if (res.data.code === 200){
            this.loading = false
            this.loadingText = ''
            if (res.data.data === null) {
              this.$message.warning('该挂号单号未有符合条件的信息')
              this.resetCurrentParams()
              return
            }
            this.careHistory = res.data.data

            this.careOrders = res.data.data.careOrderItem;
            let ypList = [];
            let jcList = [];

            //求所有处方中是用药处方的总价
            for (let i = 0; i < this.careOrders.length; i++) {
              //求所有处方中是用药处方的总价
              if (this.careOrders[i].itemType === '0'){
                ypList.push(this.careOrders[i]);
                this.allAmounts += parseInt(this.careOrders[i].amount)
              }else {
                jcList.push(this.careOrders[i]);
                this.allAmounts2 += parseInt(this.careOrders[i].amount)
              }
            }
            this.careOrders=[];
            this.careOrders=[];
            if (ypList.length !== 0) {
              this.careOrders.push(ypList); // this.careOrders[]
            }
            if (jcList.length !== 0){
              this.careOrders.push(jcList); // this.careOrders[]
            }

          }else if (res.data.code === 500){
            this.$message.error(res.data.msg)
            this.loading = false
          }
        })
      }else {
        this.$message.error('请输入正确的挂号单号')
      }
    }
  }
}
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
